<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadData">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--
            列表
                selection-change：当用户勾选或者取消勾选前面的多选框的时候，触发事件
                    事件函数有一个参数：参数是 当勾选或者取消勾选后，剩下的所有被勾选的行，放在数组中
        -->
        <el-table :data="shops" highlight-current-row v-loading="listLoading" stripe border size="mini"
                  @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="商家名称" width="120" sortable></el-table-column>
            <el-table-column prop="tel" label="联系电话" width="120" sortable></el-table-column>
            <el-table-column prop="state" label="状态" width="100" sortable>
                <template scope="scope">
                    <span v-if="scope.row.state == 0" style="color: #056c31;">正常</span>
                    <span v-else-if="scope.row.state == 1" style="color: #6c1062;">待审核</span>
                    <span v-else-if="scope.row.state == 2" style="color: #0f486c;">待激活</span>
                    <span v-else-if="scope.row.state == 3" style="color: #6c4465;">驳回</span>
                    <span v-else style="color: #ff2424;">禁用</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="商家地址" width="200" sortable></el-table-column>
            <el-table-column prop="admin.username" label="商家用户" width="120" sortable></el-table-column>
            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" type="success" :disabled="scope.row.state != 1" @click="handleEdit(scope.$index, scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <!--
                el-pagination: 分页组件
                    必须通过total属性与当前组件的属性进行绑定，查询到数据后，不但要给table绑定变量赋值，也要给这个total赋值
                    page-size: 表示每页的行数，默认是10
                    current-change： 当当前页码发生改变时触发事件（翻页）
                        在这个事件内，修改请求参数，发送到后端接口
            -->
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="商家入驻审核" :visible.sync="shopFormVisible" :close-on-click-modal="false">
            <el-form :model="shopForm" label-width="80px" ref="shopForm">
                <el-form-item label="商家Logo">
                    <img :src="fastdfsUrl+shopForm.logo" style="height: 100px;"/>
                </el-form-item>
                <el-form-item label="商家名称">
                    <span>{{shopForm.name}}</span>
                </el-form-item>
                <el-form-item label="联系电话">
                    <span>{{shopForm.tel}}</span>
                </el-form-item>
                <el-form-item label="当前状态">
                    <span v-if="shopForm.state == 0" style="color: #056c31;">正常</span>
                    <span v-else-if="shopForm.state == 1" style="color: #6c1062;">待审核</span>
                    <span v-else-if="shopForm.state == 2" style="color: #0f486c;">待激活</span>
                    <span v-else-if="shopForm.state == 3" style="color: #6c4465;">驳回</span>
                    <span v-else style="color: #ff2424;">禁用</span>
                </el-form-item>
                <el-form-item label="商家地址">
                    <span>{{shopForm.address}}</span>
                </el-form-item>
                <el-form-item label="商家用户">
                    <span>{{shopForm.admin.username}}</span>
                </el-form-item>
                <el-form-item label="商家邮箱">
                    <span>{{shopForm.admin.email}}</span>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-radio-group v-model="auditState" size="small">
                        <el-radio :label="2">通过</el-radio>
                        <el-radio :label="-1">拒绝</el-radio>
                        <el-radio :label="3">驳回</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="shopFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="submitForm" :loading="submitLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

    export default {
        data() {
            return {
                filters: {				//高级查询的条件
                    name: ''
                },
                auditState: 2,		//审核状态
                shops: [],		//表格数据
                total: 0,				//总行数
                page: 1,				//当前页码
                listLoading: false,		//表格是否正在加载数据
                sels: [],				//列表选中行
                shopFormVisible: false, //编辑界面是否显示
                submitLoading: false,
                //编辑界面数据[与上面的表单输入框进行了双向绑定：用户在输入框中输入了内容，那么这里的对象的属性值也会随之改变]
                shopForm: {
                    id: null,
                    name: '',
                    tel: '',
                    state: 0,
                    address: '',
                    logo: '',
                    admin:{
                        id:null,
                        username:'',
                        phone:'',
                        email:''
                    }
                }
            }
        },
        methods: {
            //性别显示转换
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            handleCurrentChange(val) {
                this.page = val;
                this.loadData();
            },
            //页面挂载完毕后加载数据
            loadData() {
                let param = {
                    pageNo: this.page,
                    name: this.filters.name
                };
                this.listLoading = true;

                //NProgress.done();
                this.$http.patch("/shop", param).then(res => {
                    //NProgress.start();
                    this.total = res.data.data.total;
                    this.shops = res.data.data.rows;
                    this.listLoading = false;
                })
            },
            //删除
            handleDel: function (id) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //发送请求
                    this.$http.delete("/shop/" + id).then(res => {
                        console.debug(res)
                        this.listLoading = false;
                        let {success,msg} = res.data  //解构表达式
                        if(success){
                            //提示
                            this.$message.success(msg)
                            //重新加载数据
                            this.loadData()
                        }else{
                            //提示
                            this.$message.error(msg)
                        }
                    })

                })
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.shopFormVisible = true;		//弹出模态框
                //Object.assign({}, row)
                //给shopForm赋值，由于它与上面表单中进行了双向绑定，一旦赋值后，表单输入框中就能够自动回显数据了
                //有的时候，这里还需要通过id到后端去查询数据来进行回显数据【当分页查询数据时没有查询全部列的时候，有些属性的数据为null】
                // this.$http.get("/shop/"+ row.id).then(res=>{
                //    this.shopForm = res.data
                // })
                this.shopForm = Object.assign({}, row)
                //重置表单的验证效果
                this.$refs.shopForm.clearValidate();
            },
            //提交表单
            submitForm: function () {
                this.submitLoading = true;
                this.shopForm.auditState = this.auditState;
                //发送请求
                this.$http.post("/shop/audit", this.shopForm).then(res => {
                    let {success,msg} = res.data  //解构表达式
                    if(success){
                        this.$message.success(msg)
                        this.submitLoading = false;
                        this.$refs['shopForm'].resetFields();//重置表单
                        this.shopFormVisible = false;			//关闭模态框
                        this.loadData()		//重新加载数据
                    }else{
                        this.$message.error(msg)
                    }
                })
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                // var ids = [];
                // for(let i=0;i<this.sels.length;i++){
                //     ids.push(this.sels[i].id);
                // }
                // map表示遍历一个数组，里面是一个箭头函数：函数内部表示获取对象的id属性进行返回出来，放入一个数组中
                var ids = this.sels.map(dept => dept.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {



                })
            }
        },
        mounted() {
            this.loadData();
            //页面挂载完毕后，查询部门列表，用来做为上级部门下拉框的选项
            this.$http.post("/shop",{}).then(res => {
                this.shopOptions = res.data
            })
            //页面挂载完毕后，查询部门经理，作为下拉框选项
            this.$http.get("/employee/findByJob_id/5").then(res => {
                this.managerOptions = res.data
            })
        }
    }

</script>

<style scoped>

</style>